<template>
  <el-container>
    <el-header style="padding-left: 40px;">
      <img src="../assets//img/河北保尔-logo-.png" alt="">
      <section>
        <span style="font-size: 20px;font-weight: 600;">
          <span>{{ year }}</span>年<span>{{ month }}</span>月<span>{{ date }}</span>日&nbsp;<span>{{ hour }}</span>:<span>{{ minute }}</span>:<span>{{ second }}</span>
        </span>
        <span style="display: inline-flex;align-items: center;cursor: pointer;" @click="reload"><el-icon color="#3783BE" size="24"><RefreshRight /></el-icon></span>
        <span style="display: inline-flex;align-items: center;"><el-icon color="#3783BE" size="24"><User /></el-icon>&nbsp;<span style="font-size: 20px;font-weight: 600;">{{ role }}</span></span>
        <span style="display: inline-flex;align-items: center;cursor: pointer;" @click="exit"><img src="../assets/images/退出.png" style="width: 16px;height: auto;"></span>
      </section>
    </el-header>
    <el-main>
      <el-aside>
        <Menu></Menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-main>
  </el-container>
</template>
<script setup>
  import Menu from '@/components/Menu.vue';
  import { RouterView } from 'vue-router';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  let router = useRouter();
  let year = ref(0)
  let month = ref(0)
  let date = ref(0)
  let hour = ref(0)
  let minute = ref(0)
  let second = ref(0)
  let role = ref(sessionStorage.getItem("role"))
  setInterval(function(){
    const now = new Date();
    year.value = now.getFullYear()
    month.value = now.getMonth() + 1
    date.value = now.getDate()
    hour.value = now.getHours()
    minute.value = now.getMinutes()
    second.value = now.getSeconds()
    if(Number(month.value) / 10 < 1){
      month.value = "0" + month.value;
    }
    if(Number(date.value) / 10 < 1){
      date.value = "0" + date.value;
    }
    if(Number(hour.value) / 10 < 1){
      hour.value = "0" + hour.value;
    }
    if(Number(minute.value) / 10 < 1){
      minute.value = "0" + minute.value;
    }
    if(Number(second.value) / 10 < 1){
      second.value = "0" + second.value;
    }
  },1000)
  let reload = () => {
    window.location.reload(true)
  }
  let exit = () => {
    sessionStorage.removeItem("role")
    sessionStorage.removeItem("roleId")
    sessionStorage.removeItem("token")
    router.push('/')
  }
</script>

<style lang="less" scoped>
.el-header{
  width:100%;
  height:10%;
  min-height: 79px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  img{
    height:50px;
  }
  section{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 40px;
    min-width: 485px;
  }
}
.el-main{
  width:100%;
  height:100%;
  min-height: 650px;
  --el-main-padding: 0px;
  display: flex;
  .el-aside{
    min-height: 100%;
    width: 15%;
    min-width: 192px;
  }
  .el-main{
    min-height: 100%;
    width: 85%;
  }
}
</style>